<script lang="ts" setup>
	import HeaderSwiper from '@/views/community/HeaderSwiper.vue'
	import { MessageOutlined, HeartOutlined, UserOutlined } from "@ant-design/icons-vue"
	import { useRouter, useRoute } from 'vue-router'
	import { ArticleApi } from '@/api/article'
	import { UserApi } from '@/api/user'
	import { ref, onMounted } from 'vue'
	import utils from '@/utils'
	const router = useRouter()
	let activityList = ref<any>([])
	let postList = ref<any>([])
	const toDetail = (id : number) => {
		router.push({ name: 'communityDetail', query: { id: id } })
	}

	const getActivityList = () => {
		ArticleApi.getArticle({
			page: 1,
			size: 6,
			type: 1
		}).then((res : any) => {
			if (res.code == 1) {
				activityList.value = [...res.data]
			}
		})
	}
	let page = ref(1)
	const size = ref(10)
	let loading = ref(false)
	const getPostList = () => {
		if(loading.value){
			return
		}
		loading.value = true
		ArticleApi.getArticle({
			page: page.value,
			size: size.value,
			type: 0
		}).then((res : any) => {
			loading.value = false
			if (res.code == 1) {
				page.value++
				res.data.forEach((item : any, index : number) => {
					item.imgList = item.img ? item.img.split(",") : []
					item.labelList = item.label ? item.label.split(",") : []
				})
				postList.value = postList.value.concat([...res.data])
			}
		})
	}
	getActivityList()
	getPostList()
	let userList = ref<any>([])
	const getActiveUser = () => {
		UserApi.getActiveUser({
			size: 5
		}).then((res : any) => {
			if (res.code == 1) {
				userList.value = res.data
			}
		})
	}
	getActiveUser()
	onMounted(() => {
		window.addEventListener('scroll', function () {
			var scrollHeight = document.documentElement.scrollHeight;
			var clientHeight = window.innerHeight;
			var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			if (scrollTop + clientHeight >= scrollHeight) {
				getPostList()
			}
		});
	})
</script>

<template>

	<div class="content">
		<div class="header">
			<HeaderSwiper />
			<div class="item item1">
				<div class="title">
					最新活动
				</div>
				<div class="item1-box">
					<div class="course" v-for="(item,index) in activityList" @click="toDetail(item.id)">
						<img :src="item.img" class="img" />
						<div class="lebel" v-if="item.label">
							{{item.label}}
						</div>
						<div class="text-box">
							<div class="course-title">
								{{item.title}}
							</div>
							<div class="footer">
								<div class="avatar">
									<a-avatar size="large" :src="item.avatar">
										<template #icon>
											<UserOutlined />
										</template>
									</a-avatar>
								</div>
								<div class="name">{{item.nickname}}</div>
								<div class="time">
									{{utils.getFullTime(item.createTime,"day")}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="item item2">
			<div class="item2-box">
				<div class="box-left">
					<div class="box-title">
						动态
					</div>
					<div class="left-list">
						<div class="left-li" v-for="(item,index) in postList" :key="index">
							<div class="li-header">
								<a-avatar size="large" :src="item.avatar" class="avatar">
									<template #icon>
										<UserOutlined />
									</template>
								</a-avatar>
								<div class="name-box">
									<div class="name">{{item.nickname}}</div>
									<div class="time">
										{{utils.getFullTime(item.createTime)}}
									</div>
								</div>
							</div>
							<div class="li-content" @click="toDetail(item.id)">
								<div>
									<div class="li-title">
										{{item.title}}
									</div>
									<div class="li-text">
										<span v-html="item.content.replace(/<[^>]+>/g, '')"></span>
									</div>
									<div class="li-img" v-if="item.imgList.length>1">
										<img :src="url" v-for="url in item.imgList" />
									</div>
								</div>
								<img :src="item.img" v-if="item.imgList.length==1" />
							</div>
							<div class="footer">
								<div class="label" v-for="label in item.labelList">
									{{label}}
								</div>
								<div class="like-box">
									<div class="icon-box">
										<heart-outlined class="icon" /> {{item.love}}
									</div>
									<div class="icon-box">
										<message-outlined class="icon" />{{item.remark}}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="box-right">
					<div class="box-title">
						活跃榜
					</div>
					<div class="right-list">
						<div class="right-li" v-for="(item,index) in userList" :key="index">
							<div class="index">{{index+1}}</div>
							<div class="li-header">
								<a-avatar :size="48" :src="item.avatar" class="avatar">
									<template #icon>
										<UserOutlined />
									</template>
								</a-avatar>
							</div>
							<div class="name-box">
								<div class="name">{{item.nickname}}</div>
								<div class="signature">
									{{item.signature}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.header {}

	.item {
		width: 1280px;
		margin: 0 auto;

		.title {
			font-size: 28px;
			margin: 24px 0 19px 0;
		}
	}

	.item1 {
		padding-bottom: 50px;

		.item1-box {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: auto auto;
			gap: 24px;
			justify-items: center;

			.course {
				cursor: pointer;
				background-color: #fff;
				width: 100%;
				border: 1px solid #e9e9e9;
				position: relative;

				.lebel {
					position: absolute;
					right: 0;
					top: 188px;
					padding: 8px;
					color: #fff;
					background-color: rgba(0, 0, 0, 0.4);
					text-align: center;
					font-size: 14px;
				}

				.img {
					width: 100%;
					height: 220px;
				}

				.text-box {
					padding: 16px;

					.course-title {
						font-size: 18px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						line-height: 25px;
						height: 50px;
					}

					.footer {
						padding-top: 16px;
						display: flex;
						align-items: center;

						.avatar {}

						.name {
							margin-left: 8px;
							font-size: 16px;
						}

						.time {
							margin-left: auto;
							color: rgba(0, 0, 0, 0.6);
							font-size: 14px;
						}
					}
				}
			}
		}
	}

	.item2 {
		padding-top: 60px;

		.item2-box {
			display: flex;
			justify-content: space-between;

			.box-title {
				font-size: 28px;
				border-bottom: 2px solid #1677ff;
				padding-bottom: 10px;
				display: inline;
			}

			.box-left {
				max-width: 792px;

				.left-list {
					margin-top: 12px;
					border-top: 2px solid #e0e0e0;

					.left-li {
						padding: 24px 0;
						border-bottom: 1px solid #f8f8f8;

						.li-header {
							display: flex;
							align-items: center;

							.avatar {
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.name-box {
								margin-left: 12px;

								.name {
									font-size: 16px;
								}

								.time {
									margin-top: 4px;
									font-size: 16px;
									color: #999999;
								}
							}
						}

						.li-content {
							margin: 12px 0 12px 0;
							display: flex;
							cursor: pointer;

							.li-title {
								font-size: 18px;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								width: 648px;
							}

							.li-text {
								margin-top: 8px;
								color: #666666;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								line-height: 20px;
								height: 40px;
							}

							.li-img {
								display: flex;
								margin-top: 10px;

								img {
									margin-left: 0px;
									margin-right: 24px;
								}
							}

							img {
								margin-left: 24px;
								width: 120px;
								height: 120px;
							}
						}

						.footer {
							display: flex;
							align-items: center;

							.label {
								background-color: #f3f4f6;
								padding: 7px 8px;
								border-radius: 4px;
								font-size: 14px;
								margin-right: 8px;
							}

							.like-box {
								margin-left: auto;
								display: flex;
								align-items: center;
								color: #666666;
								width: 90px;
								justify-content: space-between;
								font-size: 14px;

								.icon-box {
									display: flex;
									align-items: end;

									.icon {
										margin-right: 4px;
										font-size: 18px;
									}
								}
							}
						}
					}
				}
			}

			.box-right {
				position: sticky;
				top: 90px;
				height: 550px;

				.right-list {
					width: 400px;
					margin-top: 12px;
					border-top: 2px solid #e0e0e0;

					.img {
						width: 100%;
						height: 260px;
						margin: 40px 0 10px 0;
					}

					.right-li {
						display: flex;
						align-items: center;
						margin: 24px 0 8px 0;

						.index {
							font-style: italic;
							font-size: 18px;
							margin-right: 16px;
						}

						.li-header {
							.avatar {
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}

						.name-box {
							margin-left: 8px;

							.name {
								flex: 1;
								font-size: 18px;
								line-height: 26px;
								word-break: break-all;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								overflow: hidden;
								-webkit-box-orient: vertical;
								text-overflow: ellipsis;
								margin-bottom: 4px;
							}

							.signature {
								font-size: 14px;
								line-height: 23px;
								color: #999999;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								overflow: hidden;
								-webkit-box-orient: vertical;
								text-overflow: ellipsis;
								word-break: break-word;
							}
						}
					}
				}
			}
		}
	}
</style>